<template>
<div class="userOrder">
		<header class="userOrder-header">
             <router-view></router-view> 
             <router-link to="/user" tag="i">
             </router-link> 
            <span>我的收藏</span>
        </header>
        
        <div class="items" :class="{'itemss':receiveCollect.length>0}" >
            <div v-for="(f,index) in receiveCollect" :key="index" class="collectItems">
                <img :src="f.pic" class="img222">
                <div class="collectItemsData">
                    <p>{{f.name}}</p>
                    <p>{{f.salesPrice}}</p>
                    <p>有货</p>
                </div>
                <div class="delAndAdd">
                    <b @click="deleteCollect(f)"></b>
                    <i @click="addCart(f)"></i>
                </div>
            </div>
        </div>
	</div>
</template>
<script>
export default {
    methods:{
        deleteCollect(f){
            this.$store.commit("delFavorite",f)
        },
        addCart(f){
            this.$store.commit("addProduct",f)
        }
    },
    computed:{
        receiveCollect(){
            return this.$store.state.favoriteList;
        }
    }
}
</script>
<style>
@import "../../static/css/base.css";
.collectItems{
    background: white;
    display: flex;
    position: relative;    
}
.delAndAdd{
    display: flex;
    position: absolute;
    top:1.5rem;
    right: .5rem;
    z-index: 333;
}
.delAndAdd b{
    width: .5rem;
    height: .5rem;
    background: url(../../static/img5/icon-delete.png) no-repeat right center;
    background-size: 60%; 
    margin-right: .3rem; 
}
.delAndAdd i{
    width: .5rem;
    height: .5rem;
    background: url(../../static/img5/icon-cart1.png) no-repeat right center;
    background-size: 80%; 
}
.collectItemsData p:first-child{
    font-size: .22rem;
    padding-top:.28rem;
}
.collectItemsData p:nth-child(2){
    font-size: .24rem;
    padding-top:.28rem;
    color:red;
}
.collectItemsData p:last-child{
    font-size: .22rem;
    padding-top:.2rem;
}
.img222{
    width: 2.1rem;
    height: 2.1rem;
}
.userOrder{
    width: 100%;
    height: 100vh;
    font-size: .15rem;
}
.userOrder-header{
    width:100%;
    height: 0.65rem;
    font-size:.25rem;
    display: flex;
    align-items:center;
}

.userOrder-header i{
    width: .5rem;
    height: .7rem;
    background: url(../../static/img5/icon-arrow1.png) no-repeat .15rem center;
    background-size: 50%;
}

.userOrder-header span{
    padding-left: 32%;
}

.items{
    background: url(../../static/img5/empty-bg.png) no-repeat center 1rem;
    background-size:48%;
    background-color:rgb(248,248,248);
    width:100%;
    height: 100vh;
}
.itemss{
    background: none;
    background-color:rgb(248,248,248);
}
</style>
